import AdvancedImageMagnifier from './AdvancedImageMagnifier';
import './App.css';
import ImageMagnifier from './ImageMagnifier';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>图片放大镜示例</h1>
        <p>将鼠标移到图片上查看放大效果</p>
      </header>

      <main className="App-main">
        <div className="example-section">
          <h2>基础版本 - 跟随鼠标</h2>
          <p>放大镜跟随鼠标移动</p>
          <ImageMagnifier
            src="https://picsum.photos/800/600?random=1"
            alt="示例图片1"
            width={400}
            height={300}
            magnifierSize={150}
            zoomLevel={2.5}
          />
        </div>

        <div className="example-section">
          <h2>高级版本 - 固定位置</h2>
          <p>放大区域固定在图片右侧</p>
          <AdvancedImageMagnifier
            src="https://picsum.photos/800/600?random=2"
            alt="示例图片2"
            width={400}
            height={300}
            magnifierSize={200}
            zoomLevel={3}
          />
        </div>

        <div className="example-section">
          <h2>高倍率放大</h2>
          <p>5倍放大效果</p>
          <ImageMagnifier
            src="https://picsum.photos/800/600?random=4"
            alt="示例图片4"
            width={350}
            height={250}
            magnifierSize={120}
            zoomLevel={5}
          />
        </div>
        <div className="example-section">
          <h2>大尺寸示例</h2>
          <p>更大的放大镜和更高的倍率</p>
          <AdvancedImageMagnifier
            src="https://picsum.photos/800/600?random=3"
            alt="示例图片3"
            width={500}
            height={350}
            magnifierSize={250}
            zoomLevel={4}
          />
        </div>
      </main>
    </div>
  );
}

export default App;
